<template>
  <div class="content">
    <div class="main">
      <div class="title">新用户注册</div>
      <cube-input v-model="email" class="row" :clearable="clearable" placeholder="请输入邮箱"></cube-input>
      <cube-input v-model="password" class="row" :type="passwordType" placeholder="请输入密码,大于6位且必须包含英文和数字" :eye="eye"></cube-input>
      <cube-input v-model="password2" class="row" :type="passwordType" placeholder="请再次输入密码" :eye="eye"></cube-input>
      <cube-input v-model="nick" class="row" :clearable="clearable" placeholder="请输入昵称,1-8位中文组合"></cube-input>
      <cube-radio-group v-model="sex"  class="row" :options="sexoptions" :horizontal="true" />
      <cube-button class="row" @click="showDatePicker" light>{{birthday}}</cube-button>
      <cube-button class="row" :primary="true" @click="reg">注册</cube-button>
      <div class="word">
        <div><router-link to="/login">已注册用户登陆</router-link></div>
        <div><router-link to="/reg"></router-link></div>
      </div>
    </div>
  </div>
</template>

<script>
import { postData } from '../js/axios'
export default {
  name: 'reg',
  data () {
    return {
      email: '',
      password: '',
      password2: '',
      nick: '',
      sex: '1',
      passwordType: 'password',
      birthday: '选择生日',
      sexoptions: [
        {
          label: '男',
          value: '1'
        },
        {
          label: '女',
          value: '2'
        }
      ],
      clearable: {
        visible: true,
        blurHidden: true
      },
      eye: {
        open: false,
        reverse: false
      }
    }
  },
  methods: {
    reg: function () {
      console.log(this.email, this.password, this.nick, this.sex, this.birthday)
      let Obj = {}
      Obj.email = this.email
      Obj.password = this.password
      Obj.nick = this.nick
      Obj.sex = this.sex
      Obj.birthday = this.birthday
      // 验证邮箱
      var emailReg = /^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$/
      if (this.email === '' || !emailReg.test(this.email)) {
        this.showToast('email地址格式有误', 'warn')
        return false
      }
      // 验证密码
      var pwdReg = /^(?![^a-zA-Z]+$)(?!\D+$)/
      if (this.password === '' || this.password.length <= 6 || !pwdReg.test(this.password)) {
        this.showToast('密码格式有误', 'warn')
        return false
      }
      // 再次输入密码
      if (this.password !== this.password2) {
        this.showToast('两次密码输入不一致', 'warn')
        return false
      }
      // 昵称
      let nickReg = /^[\u0391-\uFFE5]+$/
      if (this.nick.length < 1 || this.nick.length > 8 || !nickReg.test(this.nick)) {
        this.showToast('昵称格式有误', 'warn')
        return false
      }
      if (this.birthday === '选择生日') {
        this.showToast('请选择生日', 'warn')
        return false
      }
      postData('http://account-server.localhost/index.php?s=/index/index/reg', Obj)
        .then(res => {
          if (res === 'isin') {
            this.showToast('邮箱已经被注册', 'warn')
          } else {
            this.showToast(
              '注册成功',
              'correct',
              function (self) {
                self.$router.push('/ucenter')
              }
            )
          }
        })
    },
    showDatePicker () {
      if (!this.datePicker) {
        this.datePicker = this.$createDatePicker({
          title: '请选择出生日期',
          min: new Date(1900, 1, 1),
          max: new Date(2020, 12, 31),
          value: new Date(),
          onSelect: this.selectHandle,
          onCancel: this.cancelHandle
        })
      }
      this.datePicker.show()
    },
    selectHandle (date, selectedVal, selectedText) {
      let birthdayArr = selectedVal
      let y = birthdayArr[0] + ''
      let m = birthdayArr[1]
      let d = birthdayArr[2]
      if (m < 10) {
        birthdayArr[1] = '0' + m
      }
      if (d < 10) {
        birthdayArr[2] = '0' + d
      }
      birthdayArr[0] = y
      this.birthday = selectedVal.join('-')
      // this.$createDialog({
      //   type: 'warn',
      //   content: `Selected Item: <br/> - date: ${date} <br/> - value: ${selectedVal.join(', ')} <br/> - text: ${selectedText.join(' ')}`,
      //   icon: 'cubeic-alert'
      // }).show()
    },
    cancelHandle () {
      // this.$createToast({
      //   type: 'correct',
      //   txt: 'Picker canceled',
      //   time: 1000
      // }).show()
    },
    showToast (msg, type, callback = function () {}) {
      let self = this
      const toast = this.$createToast({
        txt: msg,
        time: 800,
        type: type,
        onTimeout: () => {
          callback(self)
        }
      })
      toast.show()
    }
  }
}
</script>

<style lang="stylus" scoped>
.content
  width 100%
  position fixed
  top 0
  bottom 0
  z-index 10
  background #fff
  .main
    width 90%;
    margin 0 auto;
    .title
      margin-top 25px;
      color #777;
      width 100%;
    .row
      width 100%;
      margin-top 15px;
    .word
      width 100%;
      display flex;
      justify-content space-between
      color #777
      font-size 14px
      padding-top 15px
      a:line
        color #777;
</style>
